import React, { Component } from 'react';
import {
  HashRouter as Router,
  Route
} from 'react-router-dom';
import routes from './router/router.js'
import MenuBottomNav from './components/menuBottomNav/MenuBottomNav'
import './App.css';

const RouteWithSubRoutes = (route) => (
  <Route exact={route.exact} path={route.path} render={props => {
    return <route.component strict {...props} routes={route.routes}/>
  }}/>
)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  jumpTo(text) {
    window.location.href = `#${text}`
  }
  componentDidMount() {
    console.log(window.location.hash)
    if (window.location.hash === '#/') window.location.href = '#/index'
  }
  render() {
    return (
      <div className="App">
        <Router>
          <div className="router">
            {routes.map((route, i) => (
              <RouteWithSubRoutes key={i} {...route}/>
            ))}
          </div>
        </Router>
        <MenuBottomNav onChoose={text => {
          this.jumpTo(text)
        }}/>
      </div>
    );
  }
}

export default App;
